const path = require("path")
const { merge } = require('webpack-merge')
const baseConfig = require('./webpack.base')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

/**
 * 客户端打包
 */
module.exports = merge(baseConfig, {
    devtool: "source-map",
    entry: './src/client',
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'js/client.[hash:5].js', // 防止缓存
        publicPath: "/"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, {
                    loader: 'css-loader',
                    options: {
                        modules: true
                    }
                }]
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        limit: 10 * 1024,
                        name: "img/[name].[hash:5].[ext]",
                        esModule: false
                    },
                }],
                type: 'javascript/auto'
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin({
            cleanOnceBeforeBuildPatterns: ["**/*", '!favicon.ico'] // 清空所有文件，但是要排除favicon.ico
        }),
        new MiniCssExtractPlugin({
            filename: "css/bundle.[hash:5].css"
        })
    ]
})